<script setup lang="ts" name="admin-division">
import { v2RegionsCities, v2RegionsDistricts, v2RegionsProvinces } from '@fl/api/data-integration-api'
import { userAuthInfo } from '@fl/api/iam-api'
import { flowHttp } from '@fl/api/work-flow'
import { onMounted, reactive, ref } from 'vue'

import type { dataTy } from './type'

import { Division } from './type'
// 初始化获取
const data = ref()
let { cities, district, province } = reactive(new Division())
onMounted(async () => {
    const res = await v2RegionsProvinces()
    province = res.slice()
    dataFn()
})
function dataFn() {
    data.value = [
        {
            btn: '新增行政划区',
            flag: 1,
            title: '省/自治区/直辖市',
            value: province,
        },
        {
            btn: '新增行政划区',
            flag: 2,
            title: '地级市',
            value: cities,
        },
        {
            btn: '新增行政划区',
            flag: 3,
            title: '市辖区/县/县级市',
            value: district,
        },
        {
            btn: '新增行政划区',
            flag: 4,
            title: '乡/镇/街道',
            value: [],
        },
    ]
}
let provinceCode: number | string | undefined = ''// 省code
let provinceName: number | string | undefined = ''// 省Name
let citiesCode: number | string | undefined = ''// 市code
let citiesName: number | string | undefined = ''// 市Name
let districtCode: number | string | undefined = ''// 区code
let districtName: number | string | undefined = ''// 区Name
// 联级选择
async function switchLevel(val: dataTy) {
    console.log(val)

    if (val.level === 1) {
        provinceCode = val.code
        provinceName = val.province
        const res = await v2RegionsCities(provinceCode)
        cities = res.slice()
        province = province.map((item: { code: any, flag: boolean }) => {
            item.flag = item.code === val.code
            return item
        })
    }
    else if (val.level === 2) {
        citiesCode = val.code
        citiesName = val.city
        const res = await v2RegionsDistricts(citiesCode)
        district = res.slice()
        cities = cities.map((item: { code: any, flag: boolean }) => {
            item.flag = item.code === val.code
            return item
        })
    }
    else if (val.level === 3) {
        districtCode = val.code
        districtName = val.district
        // let param = {
        //     city_code: citiesCode,
        //     district_code: districtCode,
        //     page_no: 0,
        //     page_size: 10
        // }
        // let res = await v1BusinessDistrict(param)
        // console.log(res);

        // district=res.slice();
        district = district.map((item: { code: any, flag: boolean }) => {
            item.flag = item.code === val.code
            return item
        })
    }
    dataFn()
}
const visible = ref(false)
const provinceLevel = ref('')
const addParams: any = ref([])
const provinceValue: any = ref('')
const addCode: any = ref('')
let addtype = ''
// 新增
function add(item: any, i: any, type: any) {
    console.log(item)

    if (item.flag === 2 && provinceName === '') {
        ElMessage.error('请选择省')
        return
    }
    else if (item.flag === 3 && citiesName === '') {
        ElMessage.error('请选择市')
        return
    }
    else if (item.flag === 4 && districtName === '') {
        ElMessage.error('请选择区')
        return
    }
    visible.value = true
    provinceLevel.value = item.flag
    addtype = type
    if (type === 'add') {
        provinceValue.value = ''
        addCode.value = ''
    }
    else if (type === 'edit') {
        let value = ''
        if (i.level === 1)
            value = i.province
        else if (i.level === 2)
            value = i.city

        else if (i.level === 3)
            value = i.district

        provinceValue.value = value
        addCode.value = i.code
    }
}
// 保存
function save(item: any) {
    console.log(addtype)
    let url = ''
    if (item.flag === 1)
        addParams.value = { code: addCode.value, province: provinceValue.value }
    else if (item.flag === 2)
        addParams.value = { city: provinceValue.value, code: addCode.value, province: provinceName }

    else if (item.flag === 3)
        addParams.value = { city: citiesName, code: addCode.value, district: provinceValue.value, province: provinceName }
    else if (item.flag === 4)
        addParams.value = { city: citiesName, code: addCode.value, district: districtName, province: provinceName, street: provinceValue.value }

    if (addtype === 'add')
        url = 'addDivision'

    else
        url = 'updateDivision'

    flowHttp(url, {
        body: {
            data: {
                data: addParams.value,
                formCode: '80469de6caaebb34',
            },
        },

    }).then((res: any) => {
        if (res.data.code === 200) {
            ElMessage.success('添加成功')
            visible.value = false
        }
    })
}
// 取消
function cancel() {
    visible.value = false
}
// 删除
function del(val: dataTy) {
    console.log(val)
}
// 获取s2工作流token
function init() {
    userAuthInfo().then((res) => {
        console.log('userAuthInfo---', res)
        window.sessionStorage.setItem('USER_ID', res.id)
    })
}
init()
</script>

<template>
    <div class="admin-division">
        <ul class="main">
            <li v-for="item in data"
                :key="item.title"
            >
                <div class="con">
                    <p class="title">
                        {{ item.title }}
                    </p>

                    <p class="btn">
                        <el-button type="primary"
                                   style="width: 100%;"
                                   size="small"
                                   @click="add(item, '', 'add')"
                        >
                            {{ item.btn
                            }}
                        </el-button>
                    </p>

                    <div class="text">
                        <div v-for="i in item.value"
                             :key="i.code"
                        >
                            <div class="text-con"
                                 :class="i.flag && 'select'"
                                 @click="switchLevel(i)"
                            >
                                <p v-if="i.level === 1">
                                    {{ i.province }}
                                </p>

                                <p v-else-if="i.level === 2">
                                    {{ i.city }}
                                </p>

                                <p v-else-if="i.level === 3">
                                    {{ i.district }}
                                </p>

                                <p>
                                    <el-icon style="margin-right: 10px;cursor: pointer;"
                                             @click="add(item, i, 'edit')"
                                    >
                                        <EditPen />
                                    </el-icon>

                                    <el-icon style="cursor: pointer;"
                                             @click="del(i)"
                                    >
                                        <Delete />
                                    </el-icon>
                                </p>
                            </div>
                        </div>

                        <div v-if="item.flag === provinceLevel && visible"
                             class="add"
                             :class="item.flag === provinceLevel && visible ? 'bor' : ''"
                        >
                            <p class="inp">
                                <el-input v-model="provinceValue"
                                          class="inp-value"
                                          placeholder="请输入区划名称"
                                />
                                <!-- <el-input v-model="citiesValue" v-if="item.flag===2"></el-input>
                                    <el-input v-model="districtValue" v-if="item.flag===3"></el-input> -->
                            </p>

                            <p class="code">
                                <el-input v-model="addCode"
                                          class="inp-code"
                                          placeholder="请输入邮编"
                                />
                            </p>

                            <p class="save">
                                <el-button type="text"
                                           @click="save(item)"
                                >
                                    保存
                                </el-button>

                                <el-button type="text"
                                           @click="cancel"
                                >
                                    取消
                                </el-button>
                            </p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.admin-division {
    padding: 20px;
    background-color: #ffffff;

    .main {
        display: flex;

        li {
            flex: 1;
            border: 1px solid #e5e6eb;
            height: 897px;

            .con {
                .title {
                    background-color: #e5e6eb;
                    min-height: 46px;
                    padding: 12px 32px 12px 32px;
                    font-family: PingFang SC;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 22px;
                    text-align: left;
                    color: #86909c;
                }

                .btn {
                    padding: 12px 16px;
                }

                .text {
                    padding: 0px 16px;

                    .text-con {
                        display: flex;
                        justify-content: space-between;
                        padding: 7px 16px;
                        background-color: #f7f8fa;
                        border-radius: 3px;
                        color: #4e5969;
                        font-size: 14px;
                        margin-top: 5px;
                    }

                    .text-con:hover {
                        background-color: #fff0f0;
                        color: #da0004;
                    }

                    .select {
                        background-color: #fff0f0;
                        color: #da0004;
                    }
                    .bor {
                        border: 1px solid #da0004;
                    }
                    .add {
                        display: flex;

                        // position: relative;
                        margin-top: 10px;
                        .inp {
                            .inp-value {
                            }
                        }
                        .code {
                            // position: absolute;
                            // top: 0;
                            // right: 90px;
                            .inp-code {
                            }
                        }
                        .save {
                            flex: 0 0 75px;
                            // position: absolute;
                            // top: 0;
                            // right: 10px;
                        }
                    }
                }
            }
        }
    }
}
:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
        inset;
    background: #f8f8f8;
    cursor: default;
    .el-input__inner {
        cursor: default !important;
    }
}
</style>
